<template>
  <div style="width:700px">
    <RenderForm
      v-model="form"
      :fields="list"
      :loading="loading"
      label-width="100px"
      :disabled="locked"
      @unlock="locked=false"
      @cancel="handleCancel"
      @reset="handleReset"
      @submit="handleSubmit"
    >
      <template #default>default is the real start</template>

      <template #sort-0>sort-0 is the idx-0 in the form (exclude default)</template>

      <template
        #sort-100
      >sort-100 is the idx-100 in the form, or the last one (exclude end)</template>

      <template #sort-4>sort-4 is the idx-4 in the form</template>

      <template #end>end is the real end</template>
    </RenderForm>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { RenderForm } from '@/components'

@Component({
  name: 'demo-form',
  components: { RenderForm }
})
export default class extends Vue {
  private form: any = {}
  private loading: boolean = false
  private locked: boolean = false
  private options: Array<any> = [
    { value: 1, text: 'A' },
    { value: 2, text: 'B' },
    { value: 3, text: 'C' }
  ]

  get list () {
    return [
      {
        prop: 'test1',
        label: '单选框',
        rules: null,
        hide: !true,
        type: 'radio',
        attrs: { isButton: !true, options: this.options }
      },
      {
        prop: 'test2',
        label: '多选框',
        rules: null,
        hide: !true,
        type: 'checkbox',
        attrs: { isButton: !true, options: this.options }
      },
      {
        prop: 'test3-1',
        label: '输入框1',
        rules: null,
        hide: !true,
        type: 'input',
        attrs: { placeholder: '请输入', clearable: true },
        slot: { name: 'prepend', value: 'https://' }
      },
      {
        prop: 'test3-2',
        label: '输入框2',
        rules: null,
        hide: !true,
        type: 'input',
        attrs: { type: 'number', placeholder: '请输入数字', clearable: true }
      },
      {
        prop: 'test3-3',
        label: '输入框3',
        rules: [{ required: true }],
        hide: !true,
        type: 'input',
        attrs: { type: 'textarea', placeholder: '请输入', autosize: true }
      },
      {
        prop: 'test4',
        label: '计数器',
        rules: null,
        hide: !true,
        type: 'input-number',
        attrs: {
          min: 1,
          max: 9,
          step: 0.1,
          precision: 1,
          'controls-position': 'right'
        }
      },
      {
        prop: 'test5',
        label: '选择器',
        rules: null,
        hide: !true,
        type: 'select',
        attrs: { options: this.options }
      },
      {
        prop: 'test6',
        label: '开关',
        rules: null,
        hide: !true,
        type: 'switch',
        attrs: {
          'active-text': '开',
          'inactive-text': '关',
          'active-value': 1,
          'inactive-value': false
        }
      },
      {
        prop: 'test7',
        label: '滑块',
        rules: null,
        hide: !true,
        type: 'slider',
        attrs: { min: 0, max: 10 }
      },
      {
        prop: 'test8-1',
        label: '时间选择器1',
        rules: null,
        hide: !true,
        type: 'time-picker',
        attrs: { isSelect: true, placeholder: '时间选择-限制' }
      },
      {
        prop: 'test8-2',
        label: '时间选择器2',
        rules: null,
        hide: !true,
        type: 'time-picker',
        attrs: {
          isSelect: !true,
          placeholder: '时间选择',
          'value-format': 'timestamp'
        }
      },
      {
        prop: 'test8-3',
        label: '时间选择器3',
        rules: null,
        hide: !true,
        type: 'time-picker',
        attrs: {
          isSelect: !true,
          'start-placeholder': '开始时间',
          'end-placeholder': '结束时间',
          'is-range': true,
          'value-format': 'HH:mm:ss',
          rangeKeys: ['startDate1', 'endDate1']
        }
      },
      {
        prop: 'test9-1',
        label: '日期选择器1',
        rules: null,
        hide: !true,
        type: 'date-picker',
        attrs: {
          placeholder: '日期选择',
          'value-format': 'yyyy-MM-dd HH:mm:ss'
        }
      },
      {
        prop: 'test9-2',
        label: '日期选择器2',
        rules: null,
        hide: !true,
        type: 'date-picker',
        attrs: {
          'start-placeholder': '开始日期',
          'end-placeholder': '结束日期',
          type: 'daterange',
          'value-format': 'yyyy-MM-dd HH:mm:ss',
          rangeKeys: ['startDate2', 'endDate2']
        }
      },
      {
        prop: 'test10',
        label: '评分',
        rules: null,
        hide: !true,
        type: 'rate',
        attrs: null
      },
      {
        prop: 'test11',
        label: '颜色选择器',
        rules: null,
        hide: !true,
        type: 'color-picker',
        attrs: null
      },
      { type: 'divider', attrs: { text: '分割线' } },
      {
        prop: 'test12',
        label: '文件上传',
        rules: null,
        hide: !true,
        type: 'upload-file',
        attrs: {
          action: 'https://jsonplaceholder.typicode.com/posts/',
          'show-file-list': false,
          limit: 1,
          tip: 'this is a tip for upload file'
        },
        events: {
          success: (res: any) => {
            this.$message.success('上传完成')
          }
        }
      },
      {
        prop: 'test13',
        label: '图片上传',
        rules: null,
        hide: !true,
        type: 'upload-image',
        attrs: {
          action: 'https://jsonplaceholder.typicode.com/posts/',
          limit: 1
        },
        events: {
          success: (res: any) => {
            this.$message.success('上传成功')
          }
        }
      },
      {
        prop: 'test14',
        label: '输入比例',
        rules: null,
        hide: false,
        type: 'input-number-ratio',
        attrs: {
          type: 'numberrange',
          ratio: 0.01,
          precision: null,
          rangeKeys: ['numberStart', 'numberEnd']
        },
        events: {
          change: (v: any) => {
            console.log('number range change', v)
          }
        }
      }
    ]
  }

  private handleCancel (): void {
    console.log('form cancel')
  }
  private handleReset (): void {
    console.log('form reset')
    this.form = {}
  }
  private handleSubmit (form: any): void {
    this.loading = true

    console.log('form submit', form)

    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>
